<template>
	<view class="wrap">
		<view class="images-swiper">
			<swiper class="swiper-box" :autoplay="true" duration="800" interval="5000" :circular="true"
				@change="setCurrent">
				<swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
					<image class="slide-image" mode="aspectFill" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="banner-num">
				<text>{{ currentIndex }}</text>
				<text>/</text>
				<text>{{ images.length }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	// 接收来自父组件的图片数组
	const props = defineProps({
		images: {
			type: Array,
			required: true
		}
	});

	// 当前轮播图的索引（从1开始）
	const currentIndex = ref(1);

	// 监听传入的 images 变化，确保 currentIndex 在有效范围内
	watch(() => props.images, () => {
		if (currentIndex.value > props.images.length) {
			currentIndex.value = props.images.length || 1;
		}
	}, {
		immediate: true
	});

	// 设置当前轮播图的索引
	const setCurrent = (e) => {
		currentIndex.value = e.detail.current + 1;
	};

	// 预览图片的方法
	const onPreviewImages = (index) => {
		// 使用展开运算符复制 images 数组，确保不影响原数据
		const imageUrls = [...props.images];
		uni.previewImage({
			current: imageUrls[index],
			urls: imageUrls
		});
	};
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 750rpx;
		height: 750rpx;

		.slide-image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.banner-num {
		position: absolute;
		right: 30rpx;
		margin-top: -70rpx;
		padding: 2rpx 18rpx;
		background: rgba(0, 0, 0, 0.363);
		border-radius: 50rpx;
		color: #fff;
		font-size: 26rpx;
	}
</style>